<template>
  <div class="flex flex-wrap mb-4">
    <a-space size="medium">
      <template v-for="(item, index) in buttons" :key="index">
        <span v-if="itemButtonIsShow(item)">
          <slot v-if="item.type === 'slot'" :name="item.slotName"></slot>
          <a-button v-else :type="item.type" @click="handleButtonEvent(item)">
            <template #icon v-if="item.icon">
              <component :is="`icon-${item.icon}`" />
            </template>
            {{ item.label }}
          </a-button>
        </span>
      </template>
    </a-space>
  </div>
</template>

<script setup>
  import { usePermission } from '@/hooks/usePermission'

  const props = defineProps({
    buttons: {
      type: Array,
      default: () => [],
    },
    orderInfo: {
      type: Object,
      default: () => {},
    },
  })
  // 控制按钮是否显示
  const itemButtonIsShow = (btn) => {
    return (
      btn.show !== false &&
      (typeof btn.show === 'function' ? btn.show(props.orderInfo) : true) &&
      (btn.permission ? usePermission(btn.permission) : true)
    )
  }
  const handleButtonEvent = function (item) {
    item.method(props.orderInfo)
  }
</script>
